<template>
    <div class="all">
      <div class="top">
        <header v-if='showNav'>
          <div class="div">
            <img src="../../../assets/返回.png" @click="back()" alt="">
            <span class="solid" @click="back()">返回</span>
          </div>
          <div class="div">
            <span>服务项目维护</span>
          </div>
          <div class="div">
            <img v-show="(type == '1' || type =='2' || type ==5) || isAll === 1" src="../../../assets/蓝添加.png" alt="" @click="add()">
            <span v-show="(type == '1' || type =='2' || type ==5) || isAll === 1"  class="solid" @click="add()">新增</span>
          </div>
        </header>
        <div class="search">
          <van-search
            v-model="searchValue"
            shape="round"
            background="#fff"
            @keyup="getData()"
            placeholder="请输入搜索关键词"
          />
        </div>
      </div>
      <div class="content">
        <div class="left" v-if="isAll === 1">
          <ul v-for="(item, index) in  leftMenu"
              :key="index"
              :class="[item.type == type ? 'selectUl' : '']"
              @click.stop="type = item.type, getData()"
          >
            <!--            (type == 1 ? leftMenu : leftMenu2)-->
            <li :class="[item.type == type ? 'selectLi' : '']">{{item.name}}</li>
          </ul>
        </div>
        <div class="left" v-else>
          <ul v-for="(item, index) in (type == 1 ? leftMenu1 : type == 2 ? leftMenu2 : type == 5 ? leftMenu5 : leftMenu)"
              :key="index"
              :class="[item.type == type ? 'selectUl' : '']"
              @click.stop="type = item.type, getData()"
          >
            <li :class="[item.type == type ? 'selectLi' : '']">{{item.name}}</li>
          </ul>
        </div>
        <div class="right" v-loading='loading'>
          <van-empty
            style="width: 100%;height: 60%"
            v-show="dataList.length <= 0"
            class="custom-image"
            :image="require('../../../assets/空两本书.png')"
            description="暂无数据"
          />
          <div class="box"
               @click="selectXiangmu(item)"
               v-for="(item, index) in dataList" :key="index">
            <p class="pTitle">{{item.item_id}}</p>
            <p class="pDesc">{{item.desc}}</p>
            <p class="Ptime" >
              <span class="time" v-show="Number(type) !== 1 && item.duration">
                <img src="../../../assets/预约时间@2x.png" alt="">
                {{item.duration}}分钟
              </span>
              <span class="price">￥{{item.rebate_amount}}/次</span>
            </p>
            <p class="pBtn">
<!--              v-show="type == '1' || type == '2' || type == 5"-->
              <button class="delBtn"  @click.stop="deleteBtn(item, index)">作废</button>
              <button class="updateBtn" @click.stop="update(item)">修改</button>
            </p>
          </div>
        </div>
      </div>
      <van-dialog v-model="delshow"
                  width="80%"
                  confirm-button-color="#1da4f2"
                  title="确认作废此条记录吗？"
                  @confirm="delConfirm()"
                  show-cancel-button>
      </van-dialog>
    </div>
</template>

<script>
import typeList from '../../../http/video.http'
import {Toast} from 'vant'
export default {
  name: 'PriceList',
  data () {
    return {
      loading: false,
      showNav: this.$route.query.showNav != 1,
      userid: this.$route.query.userid,
      searchValue: '',
      activeKey: 0,
      leftMenu1: [
        {
          name: '图文咨询',
          type: 1
        }
      ],
      leftMenu2: [
        {
          name: '视频咨询',
          type: 2
        }
      ],
      leftMenu5: [
        {
          name: '远程会诊',
          type: 5
        }
      ],
      leftMenu: typeList.typeList,
      type: Number(this.$route.query.type),
      dataList: [],
      delshow: false,
      ITEM: '',
      ITEMindex: 0,
      select: this.$route.query.select,
      isAll: Number(this.$route.query.isAll),
      teamID: this.$route.query.id
    }
  },
  mounted () {
    if (this.$route.query.team_id) {
      this.teamID = this.$route.query.team_id
    }
    if (sessionStorage.getItem('type')) {
      this.type = sessionStorage.getItem('type')
    } else if (this.isAll == 1) {
      console.log(this.leftMenu)
      this.type = this.leftMenu[0].type
    }
    this.getData()
  },
  methods: {
    selectXiangmu (item) {
      if (this.select === 'true') {
        if (sessionStorage.getItem('servicePackData') !== null) {
          var data = JSON.parse(sessionStorage.getItem('servicePackData'))
          // var text
          // if (item.item_type == 1) {
          //   text = '图文咨询'
          // } else if (item.item_type == 2) {
          //   text = '视频咨询'
          // } else if (item.item_type == 3) {
          //   text = '居家康复'
          // } else if (item.item_type == 4) {
          //   text = '居家护理'
          // }
          if (item.rebate_amoun === null || item.amount === null) {
            Toast('该项目暂未维护价格，请先维护')
            return false
          }
          var obj
          if (Number(item.is_use_package) === 1) {
            obj = {
              'doc_amount_id': item.id, // 医生项目价格ID
              'times': '1', // 次数
              item_id: item.item_id,
              'amount': item.rebate_amount // 项目金额 折后
            }
          } else {
            obj = {
              'doc_amount_id': item.id, // 医生项目价格ID
              'times': '1', // 次数
              item_id: item.item_id,
              'amount': item.amount // 项目金额
            }
          }

          var isrepeat = false
          for (var i in data.itemList) {
            if (data.itemList[i].doc_amount_id == item.id) {
              isrepeat = true
            }
          }
          if (isrepeat === true) {
            Toast('请勿添加重复项目')
          } else {
            data.itemList.push(obj)
            sessionStorage.setItem('servicePackData', JSON.stringify(data))
            this.$router.history.go(-1)
          }
        }
      } else {
        this.$router.push({path: '/priceDetail', query: {userid: this.userid, id: item.id, team_id: this.teamID, isEdit: 0}})
      }
    },
    // 删除按钮
    deleteBtn (item, index) {
      this.delshow = true
      this.ITEM = item
      this.ITEMindex = index
    },
    // 确认删除
    delConfirm () {
      if (this.teamID !== null && this.teamID !== undefined && this.teamID !== '') {
        this.$http.deleteTeamPrice({id: this.ITEM.id})
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              this.dataList.splice(this.ITEMindex, 1)
            } else {
              Toast(res.data.msg)
            }
          })
          .catch(err => {
            console.log(err)
            Toast('您的网络有些拥挤，请稍后再试')
          })
      } else {
        this.$http.deleteDocAmount({id: this.ITEM.id})
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              this.dataList.splice(this.ITEMindex, 1)
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    // 修改按钮
    update (item) {
      // sessionStorage.setItem('teamPriceDetail', JSON.stringify(item))
      if (this.teamID !== null && this.teamID !== undefined && this.teamID !== '') {
        sessionStorage.setItem('teamPriceDetail', JSON.stringify(item))
        this.$router.push({path: '/priceDetail', query: {userid: this.userid, id: item.id, team_id: this.teamID}})
      } else {
        this.$router.push({path: '/priceDetail', query: {userid: this.userid, id: item.id}})
      }
    },
    // 获取不同类型的项目 列表
    getData () {
      this.loading = true
      if (this.teamID !== null && this.teamID !== undefined && this.teamID !== '') {
        this.$http.findTeamPrice({item_type: this.type, name: this.searchValue, team_id: this.teamID})
          .then(res => {
            this.loading = false
            console.log(res)
            if (res.data.status === 'success') {
              this.dataList = res.data.data
            } else {
              Toast(res.data.msg)
            }
          })
          .catch(err => {
            this.loading = false
            console.log(err)
            Toast('您的网络有些拥挤，请稍后再试')
          })
      } else {
        this.$http.findDocAmount({item_type: this.type, name: this.searchValue})
          .then(res => {
            console.log(res)
            this.loading = false
            if (res.data.status === 'success') {
              this.dataList = res.data.data
            }
          })
          .catch(err => {
            console.log(err)
            this.loading = false
          })
      }
    },
    // 新增
    add () {
      sessionStorage.removeItem('teamPriceDetail')
      this.$router.push({path: '/priceDetail', query: {userid: this.userid, team_id: this.teamID}})
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  },
  destroyed () {
    sessionStorage.setItem('type', this.type)
    sessionStorage.removeItem('priceDetail')
  }
}
</script>

<style scoped lang="scss">
  .all{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #FAF9FE;
  }
  .top{
    position: sticky;
    top: 0;
    z-index: 9;
  }
  header{
     width: 100%;
     height: 44px;
     display: flex;
     align-items: center;
     border-bottom: 1px solid #E5E5E5;
     background: white;
   }
   .div{
     width: 33%;
     height: 100%;
     display: flex;
     align-items: center;
     font-family: "PingFang SC";
     font-size: 15px;
     font-weight: bold;
   }
   .div img{
     margin-right: 5px;
   }
   .div:nth-child(1) img{
     height: 13px;
     width: 7px;
     margin-left: 15px;
   }
   .div:nth-child(3) img{
     width: 14px;
     height: 14px;
     margin-right: 3px;
   }
   .div:nth-child(3) span{
     margin-right: 15px;
   }
   .div:nth-child(2){
     justify-content: center;
   }
   .div:nth-child(3){
     justify-content: flex-end;
   }
   .solid{
     color: #1DA4F2;
   }
   .content{
     height: 88%;
     display: flex;
   }
   .left{
     height: 100%;
     background: white;
     overflow: auto;
   }
   .left ul{
     width: 100px;
     height: 44px;
     background: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .left ul li{
     width: 100%;
     height: 70%;
     font-size: 15px;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .selectUl {
     color: #1DA4F2;
     background: #FAF9FE !important;
   }
   .selectLi{
     border-left: 2px solid #1DA4F2;
   }
  .right{
    width: 80%;
    overflow: auto;
  }
   .box{
     width: 90%;
     background: white;
     padding: 5px 10px;
     box-sizing: border-box;
     margin: 10px auto;
     border-radius: 10px;
   }
  .box:last-child{
    margin-bottom: 40px;
  }
  .pTitle {
    height: 30px;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    display: flex;
    align-items: center;
  }
  .pDesc {
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
  /*//单行*/
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  }
  .Ptime {
    height: 30px;
    display: flex;
    align-items: center;
  }
  .Ptime img{
    width: 15px;
    height: 15px;
    margin-right: 3px;
  }
  .Ptime .time{
    font-size: 11px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    display: flex;
    align-items: center;
    margin-right: 30px;
  }
  .price{
    font-size: 11px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #E3170D;
  }
   .box button{
     min-width: 75px;
     min-height: 25px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 2px;
     margin-left: 15px;
     font-size: 11px;
     font-family: PingFang SC;
     font-weight: bold;
   }
   .pBtn{
     height: 30px;
     display: flex;
     align-items: center;
     justify-content: flex-end;
   }
   .delBtn{
     background: white;
     color: #1DA4F2;
     border: 1px solid #1DA4F2;
   }
   .updateBtn{
     background: #1DA4F2;
     color: white;
     border: 1px solid #1DA4F2;
   }

  /deep/ .van-search{
    height: 44px;
    padding: 0 12px;
  }
  /*

   /deep/ .van-sidebar{
     width: 100px;
     height: 88%;
     background: white;
   }
  /deep/ .van-search .van-cell{*/
  /*  padding: 3px 8px 3px 0;*/
  /*}*/
  /*/deep/ .van-sidebar-item{*/
  /*  padding: 15px 12px;*/
  /*  background: white;*/
  /*  font-size: 15px;*/
  /*}*/
  /*/deep/ .van-sidebar-item--select{*/
  /*  background-color: rgba(250, 249, 254, 1) !important;*/
  /*  color: #1DA4F2;*/
  /*}*/
  /*/deep/ .van-sidebar-item--select::before {*/
  /*  position: absolute;*/
  /*  top: 50%;*/
  /*  left: 0;*/
  /*  width: 2px;*/
  /*  height: 60%;*/
  /*  !* height: 20px; *!*/
  /*  background-color: #1da4f2;*/
  /*  -webkit-transform: translateY(-50%);*/
  /*  -ms-transform: translateY(-50%);*/
  /*  transform: translateY(-50%);*/
  /*  content: '';*/
  /*}*/
</style>
